<template>
  <div class="contain">
    <div class="login-box">
      <img :src="loginBgi" class="img_big" alt="" />
      <div class="centerbox">
        <img class="loginbgi" :src="loginLogo" mode="" />
      </div>
      <div class="login-card">
        <div class="c-title">登录</div>
        <div class="flex-direction-column yd-input-bigbox">
          <div class="input-box">
            <input
              type="number"
              class="inydtel"
              v-model="form.telphone"
              id="telPhone"
              @input="checkPhoneNumber"
              placeholder="请输入手机号码"
              clear
            />
          </div>
          <p v-if="telErrorText" class="error">*{{ telErrorText }}</p>
          <div :class="{ 'input-box2': true, 'box-show': isPhoneNumberValid }">
            <input
              type="number"
              class="inyzm"
              v-model="tuyzm"
              placeholder="请输入图形验证码"
            />
            <div class="yzmbox">
              <img
                :src="captchaPicUrl"
                @click="updateCaptchaPic"
                class="yzmimg"
                mode=""
              />
            </div>
          </div>
          <p v-if="tuyzmErrorText" class="error">*{{ tuyzmErrorText }}</p>
          <div class="input-box">
            <input
              type="text"
              class="inycode"
              v-model="dxyzm"
              placeholder="请输入短信验证码"
            />
            <div @click="sendSms" class="getyzm-box" v-if="!disabled">
              获取验证码
            </div>
            <div class="countdown-box" v-if="disabled">{{ count }}重新获取</div>
          </div>
          <p v-if="dxyzmErrorText" class="error">*{{ dxyzmErrorText }}</p>
          <div :class="{ loginbth: true, btnshow: checked2 }" @click="sumBit()">
            登录
          </div>
        </div>
      </div>
      <div class="law-text">
        <p>湖南铁路科技职业技术学院</p>
        <!-- <p>京ICP备2023031162号</p> -->
      </div>
    </div>
  </div>
</template>
<script>
import { API_BASE_URL } from "@/utils/globalConstants";
import { mobileLogin, sendSmsYzm } from "@/api/user";
import { mapState } from "vuex";
export default {
  data() {
    return {
      tuyzm: "",
      dxyzm: "",
      checked2: true,
      show: false,
      count: 180,
      disabled: false,
      isPhoneNumberValid: false,
      dxyzmErrorText: "",
      tuyzmErrorText: "",
      telErrorText: "",
      captchaPicUrl: "",
      form: {},
      loginLogo: require("../assets/images/loginLogo.png"),
      loginBgi: require("../assets/images/loginBgi.png"),
    };
  },
  mounted() {},
  computed: {
    ...mapState("user", ["openId", "reUrl"]),
  },
  methods: {
    onconfirm() {
      this.show = false;
      this.checked2 = true;
    },
    onClose() {
      this.show = false;
    },
    goPrivacy() {
      this.$router.push({
        name: "protocol",
        params: {
          data: {
            xieyiCode: "GRXXBHZC",
            title: "个人信息保护政策",
          },
        },
      });
    },
    getVerificationCode() {
      this.updateCaptchaPic();
    },
    startCountdown() {
      if (this.disabled) {
        return;
      }
      this.disabled = true;
      this.count = 180; // 初始化倒计时时间为60秒
      const timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
        } else {
          clearInterval(timer); // 清除定时器
          this.disabled = false;
          this.count = 180;
        }
      }, 1000); // 每秒钟执行一次
    },
    updateCaptchaPic() {
      var baseUrl = API_BASE_URL;
      const imageUrl =
        baseUrl +
        "/yuyue/api/sysApi/getWebYzm/" +
        this.form.telphone +
        "?rnd=" +
        Math.random();
      console.log("imageUrl", imageUrl);
      this.captchaPicUrl = imageUrl;
    },
    checkPhoneNumber() {
      this.isPhoneNumberValid = this.form.telphone.length === 11;
      if (this.isPhoneNumberValid) {
        this.updateCaptchaPic();
      }
    },
    sendSms() {
      var reqData = {
        mobileNo: this.form.telphone,
        openId: this.form.telphone,
        webYzm: this.tuyzm,
      };
      sendSmsYzm(reqData).then((res) => {
        this.$toast({
          message: res.data.message,
          duration: 3000,
        });
        if (res.data.state === 0) {
          this.startCountdown();
        } else {
          this.updateCaptchaPic();
        }
      });
    },
    sumBit() {
      if (!this.checked2) {
        this.show = true;
        return;
      }
      this.$loadingU.show("Please wait...", 5000);
      var reqData = {
        mobileNo: this.form.telphone,
        smsYzm: this.dxyzm,
      };
      mobileLogin(reqData).then((e) => {
        this.$toast({
          message: e.data.message,
          duration: 3000,
        });
        this.$loadingU.hide();
        if (e.data.state === 0) {
          setTimeout(() => {
            this.$router.replace("/"); // 跳转到指定路由
          }, 1000); // 延时1秒
          this.$store.commit("user/SET_USER_INFO", e.data.data);
        }
      });
    },
  },
  components: {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
/* pages/login/login.wxss */
@color-zhuti: #0d52d1;
input {
  font-weight: 500;
  font-size: 17px;
  color: #333333;
  line-height: 22px;
}
input::placeholder {
  font-weight: 500;
  font-size: 17px;
  color: #bcbcbc;
  line-height: 20px;
}
.login-box {
  width: 100%;
  height: 100vh;
  padding: 109px 0 0 0;
  box-sizing: border-box;
  position: relative;
}

.login-card {
  width: 350px;
  padding: 19px 26px 14px 26px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 21px;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;

  .c-title {
    font-weight: bold;
    font-size: 21px;
    color: #333333;
    line-height: 24px;
    text-align: center;
  }
}

.img_big {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.dialogbox {
  width: 100%;
  height: 80px;
  text-align: center;
  margin-top: 30px;
}

.geren {
  margin-top: 10px;
  color: @color-zhuti;
}

.imgszie1 {
  width: 100%;
  margin-top: 40px;
  height: 265px;
}

.loginbgi {
  width: 148px;
  height: 126px;
  margin-bottom: 35px;
  z-index: 1;
}

.input-box {
  width: 100%;
  height: 52px;
  background: #f2f4f5;
  border-radius: 26px;
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.input-box2 {
  width: 100%;
  background: #f2f4f5;
  display: flex;
  align-items: center;
  border-radius: 26px;
  transition: opacity 0.8s ease;
  /* 过渡效果的属性和持续时间 */
  opacity: 0;
  height: 0;
  /* 初始状态高度为0，不占用位置 */
  overflow: hidden;
  /* 隐藏超出高度的内容 */
  /* 初始状态为隐藏 */
}

.loginFrom {
  width: 100%;
}

.inydtel {
  width: 100%;
  height: 60px;
  margin-left: 20px;
}

.inyzm {
  width: 200px;
  height: 60px;
  margin-left: 20px;
}

.inycode {
  margin-left: 20px;
  width: 150px;
}

.getyzm-box {
  margin-left: 5px;
  border: none !important;
  background-color: transparent !important;
  color: @color-zhuti;
  font-size: 16px;
  display: flex;
  width: 230px;
  padding: 0 15px 0 0;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
}

.countdown-box {
  margin-left: 15px;
  border: none !important;
  background-color: transparent !important;
  color: #787978;
  font-size: 14px;
  display: flex;
  width: 100px;
  justify-content: space-between;
  align-items: center;
}

.input-box div::before {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  margin-left: 3px;
  background: #d8d8d8;
}
/* Rectangle 514 */

.loginbth {
  width: 298px;
  height: 52px;
  border-radius: 26px;
  background: #0f62f9;
  opacity: 0.45;
  font-weight: bold;
  font-size: 19px;
  color: #ffffff;
  line-height: 52px;
  text-align: center;
  margin-top: 26px;
  transition: opacity 0.8s ease;
}

.btnshow {
  opacity: 1;
}

.law-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  font-weight: 400;
  color: #fafafa;
  margin-top: 100px;
}

.law-text p:nth-child(1) {
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  font-weight: 400;
  line-height: 20px;
}

.law-text p:nth-child(2) {
  font-size: 10px;
  font-weight: 400;
  line-height: 28px;
}

.yd-login-title {
  margin-left: 61px;
  margin-top: 52px;
}

.yd-login-title text:nth-child(1) {
  font-size: 56px;

  font-weight: 600;
  color: #2d2d2d;
  line-height: 78px;
}

.yd-login-title text:nth-child(2) {
  font-size: 24px;
  font-weight: 400;
  color: #999999;
  line-height: 33px;
  letter-spacing: 2px;
}

.yzmbox {
  width: 140px;
  border-radius: 15px;
  overflow: hidden;
}

.box-transition {
  transition: opacity 0.8s ease;
  /* 过渡效果的属性和持续时间 */
  opacity: 0;
  /* 初始状态为隐藏 */
}

.box-show {
  opacity: 1;
  margin-top: 12px;
  height: 52px;
  align-items: center;

  /* 显示状态 */
}

.yzmimg {
  width: 62px;
  height: 31px;
  border-radius: 5px 5px 5px 5px;
}

.error {
  display: block;
  height: 100%;
  color: red;
  margin: 5px 0 0 15px;
  font-size: 15px;
  text-align: left !important;
}
.dialogtext {
  font-size: 16px;
}
.agmbox {
  width: 100%;
  align-items: center;
  justify-content: center;
}
</style>
